import {Form , Input ,DatePicker, Select, Button, Table } from "antd";
import {PageContainer} from "@ant-design/pro-components";
import dayjs from 'dayjs';
import React, { useEffect, useId, useState } from "react";
import type { GetProps } from 'antd';
// import { FormInstance } from "antd/lib/form/hooks/useForm";
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { leaveRequest,getLeavelist, cancelLeave } from "@/services/ant-design-pro/api";
const format = "YYYY-MM-DD HH:mm:ss";
dayjs.extend(customParseFormat);
type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
const TextArea = Input.TextArea;
const  FormItem = Form.Item;
const { RangePicker } = DatePicker;
const options = [{label:"事假", value: "0"},{label: "病假",value:"1" },{ label: "年假",value: "2"}];
const TableList:React.FC = () => {
  // 查询请假信息 有就不能请假  可以修改请假信息
 const [form] = Form.useForm();
 const [leavelist, setLeavelist] = useState<[Formtype]>();
const onClick = () => {
  form?.validateFields().then((values:Formtype2) => {
     const params = {
      ...values,
      rangeTime: [values?.rangeTime?.[0].format(format),values?.rangeTime?.[1].format(format),],
     }
     leaveRequest(params).then(res => {
      if (res.success) {
        onReset();
        loadData();
      }
     })     
  }).catch((errorInfo) => {
      console.log(errorInfo)
  })
}
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
  return current && current < dayjs().startOf('day');
};

const onEdit= (record: Formtype) => {
  const params: Formtype2 = {
    ...record,
    rangeTime: [dayjs(record?.rangeTime?.[0],format),dayjs(record?.rangeTime?.[0],format)],
   }
  form.setFieldsValue(params);
}

const onCancel = (id: number) => {  
  cancelLeave({id}).then(res=> {
    if (res.success) {
      onReset();
      loadData();
    }
  })
}
const onReset = () => {
  form.resetFields();
}
const  loadData = () => {
  getLeavelist({}).then(res => {
      if (res.success) {
        setLeavelist(res.data);
      }
  })
}
useEffect(() => {
  loadData();
},[])

const  columns = [
{
  dataIndex: "type",
  title:"请假类型",
  render:(value:string) => {
    const type = options.filter(option => option.value === value)?.[0]?.label;
    return type;
  }
},
{
  dataIndex: "rangeTime",
  title:"请假时间"
},
{
  dataIndex: "reason",
  title:"请假原因"
},
{
  dataIndex:"id",
  render:(value: number,record:Formtype) => {
    return <><Button type="primary" onClick={() => {onEdit(record)}}>编辑</Button>&nbsp;&nbsp;<Button onClick={() => {onCancel(value)}}>撤销</Button></>
  }
}
]
 return (
  <PageContainer title={"管理假条"}>
    <div  style={{ display: "flex"}} >
    <Form 
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
      style={{ maxWidth: 600 }} 
      form={form}
       >
      <FormItem label="请假类型" name="type" rules={[{required: true,message : "请选择请假类型"}]}>
          <Select options={options} allowClear/> 
      </FormItem>
      <FormItem label="请假时间" name="rangeTime" rules={[{required: true,message :"请选择开始时间"}]}>
        <RangePicker   format={format}
        disabledDate={disabledDate}
        showTime/>
      </FormItem>
      <FormItem label="请假原因" name="reason" rules={[{required: true,message :"请输入请假原因"}]}>
          <TextArea rows={5} />
      </FormItem>
      <Form.Item style={{display: "flex", justifyContent: "center"}}>
        <div style={{width:"100%", display: "flex", justifyContent: "space-around"}}>
        <Button type="primary" onClick={onClick}>提交</Button> &nbsp;&nbsp;
        <Button onClick={onReset}>清除</Button>
        </div>
      </Form.Item>
      <FormItem name="id" hidden>
          <Input disabled/> 
      </FormItem>
    </Form>
    {(!!leavelist?.length) && (
       <Table
       style={{ maxWidth: 900}}
       columns={columns}
       pagination={{
         disabled: true,
         hideOnSinglePage: true
       }}
       dataSource={leavelist}
     />
    )}
   
    </div>
  
  </PageContainer>
 )
}
 export default TableList;

 type Formtype = {
  type: number;
  reason:string;
  rangeTime: [string,string];
  id?:null |number;
 }

 type Formtype2 = {
  type: number;
  reason:string;
  rangeTime: [dayjs.Dayjs,dayjs.Dayjs];
  id?:null |number;
 }